<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">订单列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="form" label-width="80px">
					<el-form-item label="订单号">
						<el-input v-model="form.refund_id" placeholder="请输入订单号" clearable @change="sousuo()"
							style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="站点名称">
						<el-select v-model="form.site_id" placeholder="请选择" style="width: 260px;" clearable
							@change="sousuo()">
							<el-option :label="item.site_name" :value="item.site_id" v-for="(item, index) in sites"
								:key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="设备号">
						<el-input v-model="form.device_id" placeholder="请输入设备号" clearable @change="sousuo()"
							style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="审核状态">
						<el-select v-model="form.audit_status" placeholder="可选择状态" style="width: 260px;" clearable
							@change="sousuo()">
							<el-option label="待审核" :value="1"></el-option>
							<el-option label="审核完成" :value="2"></el-option>
							<el-option label="审核失败" :value="3"></el-option>
							<el-option label="取消退款" :value="4"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户账号">
						<el-input v-model="form.user_tel" placeholder="请输入用户账号" clearable @change="sousuo()"
							style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="退款时间">
						<el-date-picker style="width: 260px;" v-model="form.refund_start_end" type="daterange"
							value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							@change="sousuo()"></el-date-picker>
					</el-form-item>
					<el-form-item label=""><el-button type="primary" @click="sousuo()"
							icon="el-icon-search">查询</el-button></el-form-item>
					<!-- <el-form-item><el-button type="warning" @click="getDataExcel" icon="el-icon-download">订单导出</el-button></el-form-item> -->
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="refund_id" label="订单号" width="180" align="center"></el-table-column>
					<el-table-column label="审核状态" width="100" align="center">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.audit_status == 4" type="info">取消退款</el-tag>
							<el-tag v-if="scope.row.audit_status == 3" type="info">审核失败</el-tag>
							<el-tag v-else-if="scope.row.audit_status == 2" type="success">审核完成</el-tag>
							<el-tag v-else-if="scope.row.audit_status == 1" type="warning">待审核</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="site_name" label="站点名称" width="150" align="center"></el-table-column>
					<el-table-column prop="device_id" label="设备号" width="120" align="center"></el-table-column>
					<el-table-column prop="device_name" label="设备名称" width="130" align="center"></el-table-column>
					<el-table-column prop="expect_money" label="订单金额" width="100" align="center"></el-table-column>
					<el-table-column prop="charging_money" label="支付金额" width="100" align="center"></el-table-column>
					<el-table-column prop="refund_money" label="退款金额" width="120" align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.audit_status == 2">{{ scope.row.refund_money }}</span>
							<span v-else>0</span>
						</template>
					</el-table-column>
					<el-table-column prop="" label="实际支付" width="100" align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.audit_status == 2">
								{{ (scope.row.charging_money - (scope.row.refund_money || 0)).toFixed(2) }}
							</span>
							<span v-else>{{ scope.row.charging_money }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="payment_method" label="付款方式" width="100" align="center">
						<template slot-scope="scope">
							<!-- <span>{{ payMethod[scope.row.payment_method] }}</span> -->
							<span>微信</span>
						</template>
					</el-table-column>
					<el-table-column prop="user_tel" label="用户账号" width="130" align="center"></el-table-column>
					<!-- <el-table-column prop="pay_time" label="支付时间" width="160" align="center"></el-table-column> -->
					<el-table-column prop="refunded_at" label="退款时间" width="160" align="center"></el-table-column>
					<el-table-column prop="stop_charge_method" label="停充方式" width="160" align="center"></el-table-column>
					<el-table-column prop="refund_reason" label="退款申请原因" width="160" align="center"></el-table-column>
					<el-table-column label="操作" width="220" fixed="right">
						<template slot-scope="scope">
							<el-button size="mini" plain @click="getOrderInfo(scope.row.refund_id)">详情</el-button>
							<el-button v-if="scope.row.audit_status == 1" size="mini" type="primary" plain
								@click="toRefund(scope.row, 1)">同意</el-button>
							<el-button v-if="scope.row.audit_status == 1" size="mini" type="danger" plain
								@click="toRefund(scope.row, 2)">拒绝</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount" prev-text="上一页"
					next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>

		<el-dialog :fullscreen="false" width="80%" top="50px" :visible.sync="dialogVisible" v-if="list.length">
			<el-card class="box-card" v-if="setItem.equipment && setItem.equipment.device_id">
				<div slot="header" class="clearfix"><span>退款详情</span></div>
				<div class="item-list">
					<div class="item-col">
						<div class="item-list-title">订单号：</div>
						<div class="item-list-value">{{ setItem.refund_id }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">审核状态：</div>
						<div class="item-list-value">
							<el-tag v-if="setItem.audit_status == 4" type="info">取消退款</el-tag>
							<el-tag v-if="setItem.audit_status == 3" type="info">审核失败</el-tag>
							<el-tag v-else-if="setItem.audit_status == 2" type="success">审核完成</el-tag>
							<el-tag v-else-if="setItem.audit_status == 1" type="warning">待审核</el-tag>
						</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">手机号：</div>
						<div class="item-list-value">{{ setItem.user.user_tel }}</div>
					</div>
					<!-- 站点信息 -->
					<div class="item-col">
						<div class="item-list-title">站点名称：</div>
						<div class="item-list-value">{{ setItem.equipment.site_name }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">设备名称：</div>
						<div class="item-list-value">{{ setItem.equipment.device_name }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">设备编号：</div>
						<div class="item-list-value">{{ setItem.equipment.device_id }}</div>
					</div>
					<!-- 充电信息 -->
					<div class="item-col">
						<div class="item-list-title">充电模式：</div>
						<div class="item-list-value">{{ setItem.recharge.charging_mode||'按时收费' }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">电量消耗：</div>
						<div class="item-list-value">{{ setItem.recharge.electricity_consumption || 0 }}wh</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">时间消耗：</div>
						<div class="item-list-value">{{ setItem.recharge.time_consumption || 0 }}分钟</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">结束时间：</div>
						<div class="item-list-value">{{ setItem.recharge.end_time }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">结算功率：</div>
						<div class="item-list-value">{{ setItem.recharge.settlement_power || 0 }}W</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">停充方式：</div>
						<div class="item-list-value">{{ setItem.recharge.stop_charge_method }}</div>
					</div>
					<!-- 支付信息 -->
					<div class="item-col">
						<div class="item-list-title">收费模板：</div>
						<div class="item-list-value">{{ setItem.payment.name }}</div>
					</div>
					<!-- <div class="item-col">
						<div class="item-list-title">付款方式：</div>
						<div class="item-list-value">{{ setItem.payment.payment_method }}</div>
					</div> -->
					<div class="item-col">
						<div class="item-list-title">支付时间：</div>
						<div class="item-list-value">{{ setItem.payment.pay_time }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">订单金额：</div>
						<div class="item-list-value">{{ setItem.payment.expect_money }}元</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">支付金额：</div>
						<div class="item-list-value">{{ setItem.payment.payment_amount }}元</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">退款金额：</div>
						<div class="item-list-value">
							<span v-if="setItem.audit_status == 2">{{ setItem.payment.refund_money || 0 }}元</span>
							<span v-else>0元</span>
						</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">实际收费：</div>
						<div class="item-list-value">
							<span v-if="setItem.audit_status == 2">
								{{ (setItem.payment.payment_amount - (setItem.payment.refund_money || 0)).toFixed(2) }}元
							</span>
							<span v-else>{{ setItem.payment.payment_amount }}元</span>
						</div>
					</div>
				</div>
			</el-card>
			<el-card class="box-card" style="margin-top: 20px;position: relative;">
				<div slot="header" class="clearfix"><span>功率图表</span></div>
				<div style="margin-right: 20px;">
					<line-chart :chart-data="powers" />
				</div>
				<div class="item-f">分钟</div>
				<div class="gl-f">功率(w)</div>
			</el-card>
		</el-dialog>
	</div>
</template>

<script>
import LineChart from './components/LineChart'
import { queryRefundOrder, AgreeToRefund, refundDetails, RefundChargingPower } from '@/api/order';
import { getSite } from '@/api/pile-point-admin';

export default {
	name: 'refundOrder',
	components: {
		LineChart
	},
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			dialogVisible: false,
			setItem: {},
			itemForm: {},
			refund_reason: '',
			form: {
				order_id: '',
				site_id: '',
				device_id: '',
				user_tel: '',
				pay_start_end: '',
				audit_status: ''
			},
			sites: [],
			payMethod: {
				1: '微信',
				2: '支付宝'
			},
			powers: {}
		};
	},
	created() {
		this.getSite();
		this.getData();
	},
	methods: {
		// 是否同意退款
		toRefund(row, type) {
			this.$confirm('是否' + (type == 1 ? '同意' : '拒绝') + '退款?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				AgreeToRefund({
					order_id: row.refund_id,
					type: type
				}).then(res => {
					if (res.state) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				});
			}).catch(() => {

			});
		},

		// 获取站点
		getSite() {
			getSite({ type: 1 }, false).then(res => {
				if (res.state) {
					this.sites = res.data.sitelist
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		},
		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},

		// 获取数据
		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize,
				refund_id: this.form.refund_id,
				site_id: this.form.site_id,
				device_id: this.form.device_id,
				audit_status: this.form.audit_status,
				user_tel: this.form.user_tel
			}

			if (this.form.refund_start_end) {
				data['refund_start_end'] = this.form.refund_start_end.join(' - ')
			}

			queryRefundOrder(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 查看详情
		getOrderInfo(id) {
			refundDetails({
				refund_id: id
			}).then(res => {
				this.dialogVisible = true
				this.setItem = res.data;
				RefundChargingPower({
					refund_id: id
				},false).then(res => {
					this.powers = res.data.map;
				});
			});
		}

	}
};
</script>
<style lang="scss" scoped>
.item-f {
	position: absolute;
	bottom: 55px;
	right: 10px;
}

.gl-f {
	position: absolute;
	top: 65px;
	left: 27px;
}

.item-list {
	display: flex;
	flex-wrap: wrap;

	.item-col {
		width: 50%;
		display: flex;
		align-items: center;
		margin: 15px 0;

		.item-list-title {
			width: 120px;
			display: flex;
			justify-content: flex-end;
			font-weight: 600;
		}

		.item-list-value {
			flex: 1;
			color: #999;
		}
	}
}
</style>
